<template lang="html">
	<div>
		<div :class="$style.header">
			<input :class="$style.inputBox" type="text" placeholder="本站搜索" v-model="InputValue">
			<span @click.stop="searchBook(InputValue)">
				<btn :cname="$style.btnClass">查找</btn>
			</span>
			<svg :class="$style.inputIcon" aria-hidden="true">
		    <use xlink:href="#icon-search"></use>
			</svg>
			<svg :class="$style.backIcon" aria-hidden="true" @click="goBack">
		    <use xlink:href="#icon-back"></use>
			</svg>
		</div>

	</div>
</template>
<script>
	import btn from "../core/btn";
	export default {
		components: {
			btn
		},
		data() {
			return {
				InputValue: "",
				AutCompleteData: [],
			}
		},
		methods: {
			searchBook(params) {
				if (!params) return;
				console.log(params);
				//发送请求
				//添加搜索记录
				//情况内容
				this.InputValue= "";
			},
			//搜索自动补充
			autComplete(val) {
				let url = `http://api.zhuishushenqi.com/book/auto-complete?query=${val}`;
				console.log(url);
				this.$axios.get(url)
				.then((response=>{
					let AutCompleteData = response.data;
					console.log(this.AutCompleteData);
				}))
				.catch((error=>{
					console.log(error);
				}));
			},
			goBack() {
				this.$router.back();
			}
		}
	}
</script>
<style lang="scss" module>
	.header {
		width: 100%;
		height: 110px;
		line-height: 110px;
		box-sizing: border-box;
		position: relative;
		.backIcon {
			width: 56px;
			height: 56px;
			position: absolute;
			left: 10px;
			top: 27px;
		}
		.inputBox {
			width: 548px;
			line-height: 80px;
			border: 1px solid #d3d3d3;
			font-size: 36px;
			margin-left: 70px;
			border-radius: 6px;
			padding-left: 56px;
		}
		.inputIcon {
			width: 30px;
			height: 30px;
			margin-right: 10px;
			position: absolute;
			left: 86px;
			top: 48px;
		}
		.btnClass {
			width: 110px;
			line-height: 110px;
			font-size: 40px;
			color: #01bf9a;
		}
	}
</style>